<template>
  <view class="page page-grey page-carriage-goods">
    <page-header :showPlaceHolder="false"></page-header>
    <view class="goods-list">
      <view class="goods-item" v-for="item in listData" :key="item.id">
        <image class="goods-item-image" :src="item.sliderPicUrls[0]"></image>
        <view class="goods-item-info">
          <view class="goods-item-title">{{ item.name }}</view>
        </view>
      </view>
    </view>
    <!-- 加载提示 -->
    <fui-loadmore v-show="listData.length" :state="moreState"></fui-loadmore>
  </view>
</template>

<script setup>
import { ref, reactive, computed, inject } from 'vue'
import { onLoad, onShow, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
import { useStore } from 'vuex'
import pageHeader from '@/components/header'
import carriageApi from '@/api/carriage'

const store = useStore()
const tab = inject('$tab')
const modal = inject('$modal')

const carriageId = ref('')
const queryParams = ref({})
const listData = ref([])
const moreState = ref(1)

onLoad(option => {
  carriageId.value = option.id
})

onShow(() => {
  queryParams.value = {
    pageNo: 1,
    pageSize: 10,
    tabType: 0,
    supplierId: store.getters.companyId
  }
  getGoodsList()
})

const getGoodsList = () => {
  uni.stopPullDownRefresh()
  try {
    carriageApi.getGoodsList(queryParams.value).then((res) => {      
      modal.closeLoading()
      if (res.code === 0) {
        const newData = res.data && res.data.list ? res.data.list : []
        if (queryParams.value.pageNo * queryParams.value.pageSize >= res.data.total) {
          moreState.value = 3
        } else {
          moreState.value = 1
        }
        if (queryParams.value.pageNo > 1) {
          listData.value = [...listData.value, ...newData]
        } else {
          listData.value = [...newData]
        }
      } else {
        modal.msgError(res.msg)
      }
    })
  } catch(err) {
    modal.closeLoading()
  }
}

// 下拉刷新
onPullDownRefresh(() => {
  queryParams.value.pageNo = 1
  getGoodsList()
})

// 上拉加载更多
onReachBottom(() => {
  if (moreState.value == 1) {
    modal.loading('加载中...')
    moreState.value = 2
    queryParams.value.pageNo++
    getGoodsList()
  }
})
</script>

<style lang="scss" scoped>
.page-carriage-goods {
  padding: 36rpx;
  .goods-list {
    overflow: hidden;
    border-radius: 16rpx;
    background-color: #fff;
    padding: 0 28rpx;
    .goods-item {
      display: flex;
      align-items: center;
      padding: 28rpx 0 !important;
      &:not(:last-child) {
        border-bottom: 2rpx solid var(--fui-color-border);
      }
      .goods-item-image {
        flex: 0 0 64rpx;
        width: 64rpx;
        height: 64rpx;
        overflow: hidden;
        border-radius: 8rpx;
        background: #f8f8f8;
        margin-right: 24rpx;
      }
      .goods-item-info {
        flex: 1;
        .goods-item-title {
          margin-bottom: 5rpx;
          font-size: 24rpx;
          font-weight: bold;
          color: #333;
        }
      }
    }
  }
}
</style>